<template>
	<view class="page">
		<pageTxt>
			<!--  v-model="dataList" @query="queryList" -->
			<z-paging ref="paging" refresher-only @onRefresh="onRefresh" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<u-navbar title="结算详情" :autoBack="true" :fixed="false"></u-navbar>
					<view class="tab-box">
						<u-tabs
							:current="tabIndex"
							@click="tabClickFunc"
							:list="tablist"
							inactiveStyle="color: #919092;"
							activeStyle="color: #3B75FF;"
							lineColor="#3B75FF"
						></u-tabs>
					</view>
				</template>
				<!-- 内容 -->
				<view class="detail-content-box" v-if="dataObj">
					<template v-if="tabIndex == 0">
						<u-empty
							v-if="!$fieldShowFunc('42-xmxx') && !$fieldShowFunc('42-jsxx')"
							marginTop="300rpx"
							icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png"
							text=" "
						></u-empty>
						<view class="item-box" v-if="$fieldShowFunc('42-xmxx')">
							<view class="title">项目信息</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_xmmc')">
								<text class="txt">项目名称</text>
								<view class="content">
									{{ dataObj.project_name || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_xmbh')">
								<text class="txt">项目编号</text>
								<view class="content">
									<text class="txt-btn" @click="navToProjectFunc">
										{{ dataObj.project_number || '--' }}
									</text>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_xmpp')">
								<text class="txt">项目品牌</text>
								<view class="content">
									{{ dataObj.brand_name || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_xmlx')">
								<text class="txt">项目类型</text>
								<view class="content">
									{{ dataObj.store_type_name || '--' }}
								</view>
							</view>
						</view>
						<view class="item-box" v-if="$fieldShowFunc('42-jsxx')">
							<view class="title">结算信息</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_jsdzt')">
								<text class="txt">结算单状态</text>
								<view class="content">
									<template v-if="dataObj.settlement_status == 1">待出具</template>
									<template v-if="dataObj.settlement_status == 2">出具中</template>
									<template v-if="dataObj.settlement_status == 3">已完成</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_sjwgrq')">
								<text class="txt">实际完工日期</text>
								<view class="content">
									{{ dataObj.actual_completion_date || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_cjjsdsj')">
								<text class="txt">出具结算单时间</text>
								<view class="content">
									{{ dataObj.settlement_start_date || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_jsdsx')">
								<text class="txt">结算单时效</text>
								<view class="content">
									{{ dataObj.settlement_doc_validity ? dataObj.settlement_doc_validity + '天' : '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_jswcsj')">
								<text class="txt">结算完成时间</text>
								<view class="content">
									{{ dataObj.settlement_completion_date || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_jssx')">
								<text class="txt">结算时效</text>
								<view class="content">
									{{ dataObj.settlement_validity ? dataObj.settlement_validity + '天' : '--' }}
								</view>
							</view>
							<!-- 应结算金额 -->
							<u-collapse accordion v-if="$fieldShowFunc('js_yjsje')" :border="false" value="yjsje">
								<u-collapse-item
									title="应结算金额"
									name="yjsje"
									:isLink="$fieldShowFunc('js_qyje') || $fieldShowFunc('js_zxjze')"
									:value="dataObj.settlement_amount ? dataObj.settlement_amount + '元' : '--'"
								>
									<view class="item-child-box" v-if="$fieldShowFunc('js_qyje') || $fieldShowFunc('js_zxjze')">
										<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_qyje')">
											<text class="txt">签约金额</text>
											<view class="content">
												{{ dataObj.contract_price || dataObj.contract_price == 0 ? dataObj.contract_price + '元' : '--' }}
											</view>
										</view>
										<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_zxjze')">
											<text class="txt">增减项总额</text>
											<view class="content">
												{{ dataObj.changes_amount || dataObj.changes_amount == 0 ? dataObj.changes_amount + '元' : '--' }}
											</view>
										</view>
									</view>
								</u-collapse-item>
							</u-collapse>
							<blcok v-if="!$fieldShowFunc('js_yjsje')">
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_qyje')">
									<text class="txt">签约金额</text>
									<view class="content">
										{{ dataObj.contract_price || dataObj.contract_price == 0 ? dataObj.contract_price + '元' : '--' }}
									</view>
								</view>
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_zxjze')">
									<text class="txt">增减项总额</text>
									<view class="content">
										{{ dataObj.changes_amount || dataObj.changes_amount == 0 ? dataObj.changes_amount + '元' : '--' }}
									</view>
								</view>
							</blcok>

							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_sjjsje')">
								<text class="txt">实际结算金额</text>
								<view class="content">
									{{ dataObj.paid_amount ? dataObj.paid_amount + '元' : '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_jsyhje')">
								<text class="txt">结算优惠金额</text>
								<view class="content">
									{{ dataObj.settlement_discount_amount + '' ? dataObj.settlement_discount_amount + '元' : '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_xmzzlrje')">
								<text class="txt">项目最终利润金额</text>
								<view class="content">
									{{ dataObj.final_discount_amount ? dataObj.final_discount_amount + '元' : '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_zzcblrje')">
								<text class="txt">最终成本利润率</text>
								<view class="content">
									{{ dataObj.final_cost_profit ? dataObj.final_cost_profit + '%' : '--' }}
								</view>
							</view>
							<!-- 成本金额 -->
							<u-collapse accordion v-if="$fieldShowFunc('js_cbje')" :border="false" value="cbje">
								<u-collapse-item
									title="成本金额"
									name="cbje"
									:isLink="$fieldShowFunc('js_xccgcb') || $fieldShowFunc('js_gscjcb') || $fieldShowFunc('js_glcb')"
									:value="dataObj.settlement_cost_amount ? dataObj.settlement_cost_amount + '元' : '--'"
								>
									<view class="item-child-box" v-if="$fieldShowFunc('js_xccgcb') || $fieldShowFunc('js_gscjcb') || $fieldShowFunc('js_glcb')">
										<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_xccgcb')">
											<text class="txt">现场采购成本</text>
											<view class="content">
												{{ dataObj.procurement_cost ? dataObj.procurement_cost + '元' : '--' }}
											</view>
										</view>
										<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_gscjcb')">
											<text class="txt">公司采集成本</text>
											<view class="content">
												{{ dataObj.centralized_procurement_cost ? dataObj.centralized_procurement_cost + '元' : '--' }}
											</view>
										</view>
										<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_glcb')">
											<text class="txt">管理成本</text>
											<view class="content">
												{{ dataObj.management_costs ? dataObj.management_costs + '元' : '--' }}
											</view>
										</view>
									</view>
								</u-collapse-item>
							</u-collapse>
							<block v-if="!$fieldShowFunc('js_cbje')">
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_xccgcb')">
									<text class="txt">现场采购成本</text>
									<view class="content">
										{{ dataObj.procurement_cost ? dataObj.procurement_cost + '元' : '--' }}
									</view>
								</view>
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_gscjcb')">
									<text class="txt">公司采集成本</text>
									<view class="content">
										{{ dataObj.centralized_procurement_cost ? dataObj.centralized_procurement_cost + '元' : '--' }}
									</view>
								</view>
								<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_glcb')">
									<text class="txt">管理成本</text>
									<view class="content">
										{{ dataObj.management_costs ? dataObj.management_costs + '元' : '--' }}
									</view>
								</view>
							</block>

							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_lrje')">
								<text class="txt">利润金额</text>
								<view class="content">
									{{ dataObj.profit_amount ? dataObj.profit_amount + '元' : '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_cblrl')">
								<text class="txt">成本利润率</text>
								<view class="content">
									{{ dataObj.settlement_profit_margin ? dataObj.settlement_profit_margin + '%' : '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_jsbz')">
								<text class="txt">结算备注</text>
								<view class="content">
									{{ dataObj.remark || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_jsd')">
								<text class="txt">结算单</text>
								<view class="content flex ac flex">
									<image
										v-for="(file, idx) in dataObj.settlement_file"
										:key="idx"
										:src="$fileImgFunc(file)"
										mode="aspectFill"
										class="img-box"
										@click="previewFunc(file)"
									></image>
									<template v-if="!dataObj.settlement_file.length">--</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_cbd')">
								<text class="txt">结算成本单</text>
								<view class="content flex ac flex">
									<image
										v-for="(file, idx) in dataObj.profit_statement_file"
										:key="idx"
										:src="$fileImgFunc(file)"
										mode="aspectFill"
										class="img-box"
										@click="previewFunc(file)"
									></image>
									<template v-if="!dataObj.profit_statement_file.length">--</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_jsgclqd')">
								<text class="txt">结算利润单</text>
								<view class="content flex ac flex">
									<image
										v-for="(file, idx) in dataObj.inventory_file"
										:key="idx"
										:src="$fileImgFunc(file)"
										mode="aspectFill"
										class="img-box"
										@click="previewFunc(file)"
									></image>
									<template v-if="!dataObj.inventory_file.length">--</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_xmysk')">
								<text class="txt">项目已收款</text>
								<view class="content">
									{{ dataObj.paid_amount + '' ? dataObj.paid_amount + '元' : '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_xmwsk')">
								<text class="txt">项目未收款</text>
								<view class="content">
									{{ dataObj.unpaid_amount + '' ? dataObj.unpaid_amount + '元' : '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('js_cjsj')">
								<text class="txt">创建时间</text>
								<view class="content">
									{{ dataObj.created_at || '--' }}
								</view>
							</view>
						</view>
					</template>
					<!-- 历史记录 -->
					<template v-if="tabIndex == 1">
						<view class="item-box">
							<u-empty v-if="!logList.length" marginTop="300rpx" icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png" text=" "></u-empty>
							<u-steps current="0" direction="column" dot activeColor="#3b75ff" inactiveColor="#3b75ff">
								<u-steps-item v-for="(item, index) in logList" :key="index">
									<template slot="desc">
										<view class="steps-title flex ac jb">
											<view class="steps-title-title">{{ item.updated_at }}</view>
											<view class="steps-title-user-data-box flex ac jc">
												<image class="avater-box" :src="item.handlers_image" mode="aspectFit"></image>
												<view class="user-name u-line-1">
													{{ item.handlers_name + '-' + item.handlers_position }}
												</view>
											</view>
										</view>
										<view class="steps-desc">
											<view class="steps-desc-title">
												{{ item.content }}
											</view>
											<template v-if="item.log_status != 380 && item.log_status != 410">
												<view class="steps-desc-box flex ac">
													<view class="steps-desc-box-title">审批意见</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.remark || '--' }}
													</view>
												</view>
											</template>
											<template v-if="item.log_status == 410">
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_js_sklx')">
													<view class="steps-desc-box-title">收款类型</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.payment_name || '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_skzh')">
													<view class="steps-desc-box-title">收款账户</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.account_name || '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_skje')">
													<view class="steps-desc-box-title">收款金额</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.amount_collected ? item.form_data.amount_collected + '元' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box" v-if="$fieldShowFunc('js_jsd')">
													<view class="steps-desc-box-title">结算单</view>
													<view class="steps-desc-box-desc flex ac flex-wrap">
														<image
															@click="previewFunc(file)"
															class="img-box"
															v-for="(file, fileIndex) in item.form_data.payment_voucher"
															:key="fileIndex"
															:src="$fileImgFunc(file)"
														></image>
													</view>
												</view>
											</template>
											<template v-if="item.log_status == 380">
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_yjsje')">
													<view class="steps-desc-box-title">应结算金额</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.settlement_amount ? item.form_data.settlement_amount + '元' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_zzlrje')">
													<view class="steps-desc-box-title">利润金额</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.profit_amount ? item.form_data.profit_amount + '元' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_zzcblrl')">
													<view class="steps-desc-box-title">成本利润率</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.settlement_profit_margin ? item.form_data.settlement_profit_margin + '%' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_jsbjje')">
													<view class="steps-desc-box-title">结算报价金额</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.settlement_quotation_amount ? item.form_data.settlement_quotation_amount + '元' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_jczxf')">
													<view class="steps-desc-box-title">基础装修费</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.settlement_basic_decoration_fee ? item.form_data.settlement_basic_decoration_fee + '元' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_zccgf')">
													<view class="steps-desc-box-title">主材采购费</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.settlement_material_costs ? item.form_data.settlement_material_costs + '元' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_sj')">
													<view class="steps-desc-box-title">税金</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.settlement_taxes ? item.form_data.settlement_taxes + '元' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_cbje')">
													<view class="steps-desc-box-title">成本金额</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.settlement_cost_amount ? item.form_data.settlement_cost_amount + '元' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_xccgcb')">
													<view class="steps-desc-box-title">现场采购成本</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.procurement_cost ? item.form_data.procurement_cost + '元' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_gscjcb')">
													<view class="steps-desc-box-title">公司采集成本</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.centralized_procurement_cost ? item.form_data.centralized_procurement_cost + '元' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_glcb')">
													<view class="steps-desc-box-title">管理成本</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.management_costs ? item.form_data.management_costs + '元' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_lrje')">
													<view class="steps-desc-box-title">利润金额</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.profit_amount ? item.form_data.profit_amount + '元' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_cblrl')">
													<view class="steps-desc-box-title">成本利润率</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.settlement_profit_margin ? item.form_data.settlement_profit_margin + '%' : '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('js_jsbz')">
													<view class="steps-desc-box-title">结算备注</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.remark || '--' }}
													</view>
												</view>
												<view class="steps-desc-box" v-if="$fieldShowFunc('js_jsd')">
													<view class="steps-desc-box-title">结算单</view>
													<view class="steps-desc-box-desc flex ac flex-wrap">
														<image
															@click="previewFunc(file)"
															class="img-box"
															v-for="(file, fileIndex) in item.form_data.settlement_file"
															:key="fileIndex"
															:src="$fileImgFunc(file)"
														></image>
													</view>
												</view>
												<view class="steps-desc-box" v-if="$fieldShowFunc('js_cbd')">
													<view class="steps-desc-box-title">结算成本单</view>
													<view class="steps-desc-box-desc flex ac flex-wrap">
														<image
															@click="previewFunc(file)"
															class="img-box"
															v-for="(file, fileIndex) in item.form_data.profit_statement_file"
															:key="fileIndex"
															:src="$fileImgFunc(file)"
														></image>
													</view>
												</view>
												<view class="steps-desc-box" v-if="$fieldShowFunc('js_jsgclqd')">
													<view class="steps-desc-box-title">结算利润单</view>
													<view class="steps-desc-box-desc flex ac flex-wrap">
														<image
															@click="previewFunc(file)"
															class="img-box"
															v-for="(file, fileIndex) in item.form_data.inventory_file"
															:key="fileIndex"
															:src="$fileImgFunc(file)"
														></image>
													</view>
												</view>
											</template>
										</view>
									</template>
								</u-steps-item>
							</u-steps>
						</view>
					</template>
				</view>
				<view class="bottom-btn-box flex ac jb" slot="bottom">
					<view style="width: 100%">
						<judgeBtn v-if="!loading" info unborder :per_arr="per_arr" :btns="btns" :state="dataObj.status" :item="dataObj" @change="btnsChange"></judgeBtn>
					</view>
				</view>
			</z-paging>
		</pageTxt>
		<!-- 文件预览 -->
		<preFileCom :fileObj="fileObj" @onFileSuccess="fileObj = ''"></preFileCom>

		<settlementManagement :value.sync="per_name" :oper_item="oper_item" @submit="handleSubmit"></settlementManagement>
	</view>
</template>

<script>
export default {
	data() {
		return {
			per_arr: [],
			btns: [
				{
					per_name: 'settlemen_examine',
					state: 1135,
					name: '结算单初审'
				},
				{
					per_name: 'preSettlement_reexamine',
					state: 1138,
					name: '结算单复审'
				}
			],
			// 操作相关
			oper_item: {},
			per_name: '',
			fileObj: '',
			showPrice2: false,
			showPrice: false,
			loading: true,
			dataObj: '',
			logList: [],
			tabIndex: 0,
			tablist: [
				{
					name: '详情'
				},
				{
					name: '历史记录'
				}
			]
		};
	},
	onLoad(option) {
		this.getSettlementDetails(option.id);

		// 获取权限
		this.$Api
			.getHtmlAuthority({
				path: '/settlementManagement'
			})
			.then((res) => {
				console.log(res, 'getHtmlAuthority');
				if (res.code == 200) {
					this.per_arr = res.data.permission;
				}
			});
	},
	methods: {
		onRefresh() {
			this.getSettlementDetails(this.dataObj.id);
			this.$refs.paging.complete();
		},
		tabClickFunc(e) {
			this.tabIndex = e.index;
		},
		// 详情
		getSettlementDetails(project_id) {
			this.loading = true;
			this.$Apipc
				.getSettlementDetails({
					project_id
				})
				.then((res) => {
					console.log(res, '结算详情');
					this.loading = false;
					if (res.code == 200) {
						res.data.log_list.forEach((item) => {
							item.form_data = item.form_data ? JSON.parse(item.form_data) : item.form_data;
						});
						this.logList = res.data.log_list || [];
						this.dataObj = res.data;
					}
				});
		},
		// 预览
		previewFunc(item) {
			this.fileObj = item;
		},

		btnsChange(e) {
			console.log(e, 'xxxsww');
			this.oper_item = e.item;
			this.per_name = 'preSettlement_sh';
		},
		handleSubmit(type) {
			this.onRefresh();
		},
		// 去详情项目
		navToProjectFunc() {
			uni.navigateTo({
				url: '/pagesB/projectDetail/projectDetail?id=' + this.dataObj.id
			});
		}
	}
};
</script>

<style lang="scss" scoped></style>
